<style>
    .inline-span{
        display: inline-block;
        cursor: pointer;
        color: #01AAED;
    }
    .inline-span:hover{
        text-decoration: underline;
    }
    .inline-span.account-record{
        margin-left: 20px;
    }
    .middle-div{
        line-height: 36px;
    }
    .select-div{
        line-height: 38px;
    }
    .type {
        height: 30px;
        width: 100px;
    }
    .check-recode{
        width: 100px;
        cursor: pointer;
        color: #01AAED;
    }
    .check-recode:hover{
        text-decoration: underline;
    }
    .inline-span.account-record:hover{
        color: #01AAED;
    }
</style>
<div class="layui-layout order-wrapper" style="padding:0 20px;">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset1">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">总用户</th>
                    <th style="text-align: center">今日新增用户</th>
                </tr>
                </thead>
                <tbody>
                <tr align="center">
                    <td>{{.total}}</td>
                    <td>{{.today}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-col-md4 layui-col-md-offset2">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">Vip用户总数</th>
                    <th style="text-align: center">今日新增Vip用户</th>
                </tr>
                </thead>
                <tbody>
                <tr align="center">
                    <td>{{.totalVip}}</td>
                    <td>{{.todayVip}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-inline">
                    <input class="layui-input Id" name="Id"  placeholder="请输入用户Id">
                </div>
                <div class="layui-inline">
                    <input class="layui-input name" name="name"  placeholder="请输入用户名">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn search" data-type="reload">搜索</button>
                </div>
                <div class="layui-inline fr">
                    <button class="layui-btn layui-btn-normal export">导出</button>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>
</div>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var $ = layui.$;
        //方法级渲染
        table.render({
            elem: '#table_list'
            ,url: '/user/table'
            ,where: {
                userId:$(".Id").val(),
                name:$(".name").val()
            }
            ,cols: [[
                {field:'sort', title: '序号', align:'center',width:'100',fixed:'left'},
                {field:'userId', title: '用户Id', align:'center',width:'120',fixed:'left'},
                {field:'nickname', title: '用户名', align:'center',width:'150',fixed:'left'},
                {field:'sex', title: '性别', align:'center',width:'150',templet:function (d) {
                        if(d.sex == 1){
                            return "男"
                        }else if(d.sex == 2){
                            return "女"
                        }else {
                            return "未知"
                        }
                    }},
                {field:'appName', title: '用户来源', align:'center',width:'150'},
                {field:'area', title: '地区', align:'center',width:'120'},
                {field:'isVip', title: '是否Vip', align:'center',width:'100'},
                {field:'regDate', title: '注册时间', align:'center',width:'200', sort: true},
                {field:'restDay', title: 'Vip剩余天长', align:'center',width:'200', sort: true},
                {field:'loginDate', title: '最后一次登录时间', align:'center',width:'200', sort: true},
                {field:'payCnt', title: '累计充值总额', align:'center',width:'120', sort: true},
                {field:'payTimes', title: '累计充值次数', align:'center',width:'120'},
                {field:'coinCnt', title: '累计获得书币', align:'center',width:'120', sort: true},
                {field:'coin', title: '书币余额', align:'center',width:'120', sort: true},
                {field:'gift', title: '书券余额', align:'center',width:'120', sort: true},
                {field:'', title: '操作', align:'center',width:'200',fixed:'right',templet:function (d) {
                       return  `<span class='present inline-span' onclick="givePresent(` + d.userId + `,` + d.appId + `,'` + d.nickname + `')">赠送</span>
                                <a href="/change/list?userId=` + d.userId + `" class='account-record inline-span'>账户变更记录</a>`
                    }},
            ]]
            ,id: 'listReload'
            ,page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                ,hash: 'fenye' //自定义hash值
            }
            ,height: "full-200"
        });

        var active = {
            reload: function(){
                table.reload('listReload', {
                    where: {
                        userId:$(".Id").val(),
                        name:$(".name").val()
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };


        $('#search-wrapper .search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';

        });

        $(".export").click(function(){
            var urlParam = "?page=1&limit=99999&userId=" + $(".Id").val() + "&name=" + $(".name").val() + "&export=1";
            window.open('/user/table'+urlParam)
        });
    });

    function givePresent(userId,appId,name) {
        layer.open({
            title:'赠送',
            area: ['500px', 'auto'],
            content: `<div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">用户id</label>
                            <div class="layui-input-block middle-div">
                                ` + userId + `
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block middle-div">
                                ` + name + `
                            </div>
                          </div>
                           <div class="layui-form-item">
                                <label class="layui-form-label">赠送类型</label>
                                <div class="layui-input-block select-div">
                                  <select class="type">
                                    <option value="1">书币</option>
                                    <option value="2">书券</option>
                                    <option value="3">Vip时长</option>
                                  </select>
                                </div>
                           </div>
                           <div class="layui-form-item">
                                <label class="layui-form-label">赠送数额</label>
                                <div class="layui-input-block">
                                  <input type="text" name="title" class="layui-input number">
                                </div>
                           </div>
                           <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">赠送理由</label>
                                <div class="layui-input-block">
                                  <textarea name="reason" placeholder="请输入内容" class="layui-textarea reason"></textarea>
                                </div>
                           </div>
                           <div class="layui-form-item">
                                <a href="/gift/list?userId=` + userId + `" class="layui-form-label check-recode">查看赠送历史</a>
                                <div class="layui-input-block">
                                </div>
                           </div>
                      </div>`,
            yes: function(index, layero){
                //do something
                var type = $('.type').val();
                var number = $(".number").val();
                var reason = $(".reason").val();
                console.log(type,number,reason);
                if(number == '' || reason == ''){
                    layer.msg("请输入完整信息！");
                    return
                }
                if (!/^\d+$/.test(number)){
                    layer.msg("请输入合法数字！");
                    return
                }
                $.ajax({
                    type:'post',
                    url:'/user/give',
                    data:{userId:userId,appId:appId,type:type,number:number,reason:reason},
                    success:function (data) {
                        if(data.status == 0){
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                            // layer.close(index); //如果设定了yes回调，需进行手工关闭
                        }else {
                            layer.msg(data.message);
                        }
                    }
                });
            }
        });
    }


</script>